<!--  -->
<template>
<div class="ui-dialog show">
    <div class="ui-dialog-cnt">
        <div class="ui-dialog-bd">
            <h3>登录提示</h3>
            <p>请在此框输入您的QQ账户，该账户仅用于获取您的头像和昵称</p>
            <input class="user-number" type="Number" v-model="number" placeholder="QQ号码">
        </div>
        <div class="ui-dialog-ft">
            <button type="button" data-role="button" @click="close">退出</button>
            <button type="button" data-role="button" class="btn-recommand" @click="login">登录</button>
        </div>
    </div>
</div>
</template>

<script>
import {getUserInfo} from "@/utils"
export default {
data() {
return {
    number:''
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    close(){
        this.$store.commit('loginMask',!this.$store.state.login)
    },
    login(){
        if(this.number != ''){
            getUserInfo(this.number)
        } 
    },
}
}
</script>
<style scoped>
/* @import url(); 引入css类 */

.user-number{
    border: none;
    margin: .1rem 0;
    padding: 5px;
    border: 1px solid rgba(151, 134, 134, 0.4);
}

</style>